<template>
    <div>
        <el-config-provider :locale="zhCn"> <!--《:locale="zhCn 》设置语言-->
            <el-form :model="form" :rules="rules" ref="fromRef" label-width="80px" :inline="false">



                <el-row :gutter="24">
                    <!-- 基础信息标题 -->
                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                            <el-form-item label="基础信息" label-position="top"
                                :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                            </el-form-item>
                        </div>
                    </el-col>
                    <!-- 需求编号 -->
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple">
                            <el-form-item label="需求编号" label-position="top">
                                <el-input v-model="form.requirementid" placeholder="自动生成无需填写" style="width: 260px;"
                                    clearable disabled />
                            </el-form-item>
                        </div>
                    </el-col>
                    <!-- 需求提交人 -->
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="需求提交人" label-position="top" prop="demandsubmitter">
                                <el-select v-model="form.demandsubmitter" placeholder="选择成员" style="width: 260px">
                                    <template #label="{ label }">
                                        <span style="font-weight: bold">{{ label }}</span>
                                    </template>
                                    <el-option v-for="item in recruitmentManagerDate" :label="item.leader"
                                        :value="item.leader" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <!-- 提交时间 -->
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="提交时间" label-position="top"
                                prop="creationdate">
                                <el-date-picker v-model="form.creationdate" type="datetime" placeholder="选择日期时间"
                                    date-format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                                    style="width: 260px;">
                                </el-date-picker>

                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <!-- 需求类型 -->
                <el-row :gutter="24">
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple">
                            <el-form-item label="需求类型" label-position="top">
                                <el-select v-model="form.typeOfDemand" placeholder="选择类型" style="width: 260px">
                                    <template #label="{ label, value }">

                                        <span style="font-weight: bold">{{ label }}</span>
                                    </template>
                                    <el-option v-for="item in requirementTypeDate" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <!-- 需求状态 -->
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="需求状态" label-position="top">
                                <a-radio-group v-model="form.status">
                                    <a-radio value="进行中"><a-tag color="#0fc6c2">开启</a-tag></a-radio>
                                    <a-radio value="已结束"><a-tag color="#f53f3f">关闭</a-tag></a-radio>
                                    <a-radio value="已完成"><a-tag color="#00b42a">完成</a-tag></a-radio>
                                </a-radio-group>
                            </el-form-item>
                        </div>
                    </el-col>
                    <!-- 招聘负责人 -->
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="招聘负责人" label-position="top"
                                prop="recruiterid">
                                <el-select v-model="form.recruiterid" placeholder="选择成员" style="width: 260px">
                                    <template #label="{ label, value }">
                                        <span style="font-weight: bold">{{ label }}</span>
                                    </template>
                                    <el-option v-for="item in SelectDropDown[0]?.employee" :key="item.employeeId"
                                        :label="item.employeeName" :value="item.employeeId" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <!--  -->

                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                            <el-form-item label="招聘负责人" label-position="top"
                                :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                            </el-form-item>
                        </div>
                    </el-col>
                    <!--  -->
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="选择JD" label-position="top">
                                <el-button style="width: 260px;">选择数据</el-button>
                            </el-form-item>
                        </div>
                    </el-col>
                    <!-- 所在部门 -->
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="所在部门" label-position="top"
                                prop="departmentid">
                                <el-button style="width: 260px;" @click="departmentButton">{{ theDepartmentIAmIn
                                }}</el-button>
                            </el-form-item>
                        </div>
                    </el-col>
                    <!-- 选择岗位 -->
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="选择岗位" label-position="top"
                                prop="jobname">
                                <el-select v-model="form.jobname" placeholder="选择岗位" style="width: 260px"
                                    @change="filterStructure" placement="bottom">
                                    <template #label="{ label, value }">
                                        <span style="font-weight: bold">{{ label }}</span>
                                    </template>
                                    <el-option v-for="item in positionDateDate[0]?.departmentalStructure"
                                        :label="item.postsName" :value="item.postsName" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <!--  -->

                    <!-- 岗位性质 -->
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="岗位性质" label-position="top"
                                prop="jobnature">
                                <el-select v-model="form.jobnature" placeholder="" style="width: 260px"
                                    placement="bottom">
                                    <template #label="{ label, value }">

                                        <span style="font-weight: bold">{{ value }}</span>
                                    </template>
                                    <el-option v-for="item in positionNatureDate" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <!-- 需求人数 -->
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="需求人数" label-position="top"
                                prop="numberofpositions">
                                <el-input v-model="form.numberofpositions" placeholder="输入需求人数" clearable
                                    style="width: 260px" />

                            </el-form-item>
                        </div>
                    </el-col>
                    <!-- 工作地点 -->
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="工作地点" label-position="top"
                                prop="worklocation">
                                <el-select v-model="form.worklocation" placeholder="选择工作地点" style="width: 260px"
                                    placement="bottom">
                                    <template #label="{ label, value }">
                                        <span style="font-weight: bold">{{ value }}</span>
                                    </template>
                                    <el-option v-for="item in workLocationDate" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <!--  -->

                    <!-- 期望到岗时间 -->
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="期望到岗时间" label-position="top"
                                prop="expecttobeonduty">
                                <el-date-picker v-model="form.expecttobeonduty" type="datetime"
                                    date-format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                                    placeholder="选择日期时间" style="width: 260px">
                                </el-date-picker>

                            </el-form-item>
                        </div>
                    </el-col>
                    <!-- 薪资区间 -->
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="薪资区间" label-position="top"
                                prop="budgetsalary">
                                <el-input v-model="form.budgetsalary" placeholder="输入薪资" clearable
                                    style="width: 260px" />
                            </el-form-item>
                        </div>
                    </el-col>
                    <!-- 发放模式 -->
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="发放模式" label-position="top">
                                <el-input v-model="form.distributionmode" placeholder="如:14薪" clearable
                                    style="width: 260px" />

                            </el-form-item>
                        </div>
                    </el-col>
                    <!--  -->
                    <!-- 人员来源 -->
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="人员来源" label-position="top"
                                prop="sourceofpersonnel">
                                <el-select v-model="form.sourceofpersonnel" placeholder="" style="width: 260px"
                                    placement="bottom">
                                    <template #label="{ label, value }">

                                        <span style="font-weight: bold">{{ value }}</span>
                                    </template>
                                    <el-option v-for="item in personnelSourceDate" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <!-- 学历要求 -->
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="学历要求" label-position="top"
                                prop="educationlevel">
                                <el-select v-model="form.educationlevel" placeholder="" style="width: 260px"
                                    placement="bottom">
                                    <template #label="{ label, value }">
                                        <span style="font-weight: bold">{{ value }}</span>
                                    </template>
                                    <el-option v-for="item in educationRequirementDate" :key="item.value"
                                        :label="item.label" :value="item.value" />
                                </el-select>

                            </el-form-item>
                        </div>
                    </el-col>
                    <!-- 工作年限要求 -->
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="工作年限要求" label-position="top"
                                prop="yearsofexperiencemin">
                                <el-input v-model="form.yearsofexperiencemin" clearable style="width: 260px" />

                            </el-form-item>
                        </div>
                    </el-col>
                    <!--  -->
                    <!-- 年龄要求 -->
                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="年龄要求" label-position="top"
                                prop="agerequirement">
                                <el-input v-model="form.agerequirement" clearable style="width: 260px" />

                            </el-form-item>
                        </div>
                    </el-col>
                    <!--  -->
                    <!-- 岗位职责 -->
                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="岗位职责" label-position="top"
                                prop="jobdescription">
                                <el-input v-model="form.jobdescription" clearable style="width: 560px" type="textarea"
                                    :autosize="{ minRows: 5, maxRows: 8 }" />

                            </el-form-item>
                        </div>
                    </el-col>
                    <!--  -->
                    <!-- 任职要求 -->
                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="任职要求" label-position="top"
                                prop="qualifications">
                                <el-input v-model="form.qualifications" clearable style="width: 560px" type="textarea"
                                    :autosize="{ minRows: 5, maxRows: 8 }" />

                            </el-form-item>
                        </div>
                    </el-col>
                    <!--  -->
                    <!-- 备注 -->
                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="备注" label-position="top">
                                <el-input v-model="form.remarks" clearable style="width: 560px" type="textarea"
                                    :autosize="{ minRows: 5, maxRows: 8 }" />

                            </el-form-item>
                        </div>
                    </el-col>
                    <!--  -->


                    <!--  -->


                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="add">立即创建</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>
        </el-config-provider>
    </div>
    <!--  -->
    <el-dialog title="选择岗位" v-model="IntentionDisplay" width="60%" destroy-on-close>

        <el-table :data="IntentionData" border>
            <!-- 单选列 -->
            <el-table-column label="选择" width="60" fixed="left">
                <template #default="scope">
                    <el-radio v-model="selectedRowId" :label="scope.row.deptId">
                        <span class="radio-custom"></span>
                    </el-radio>
                </template>
            </el-table-column>
            <!-- 固定岗位名称列 -->
            <el-table-column prop="deptId" label="部门id" width="120" />
            <el-table-column prop="deptName" label="部门名称" width="120" fixed="left" />

        </el-table>


        <span>
            <el-button @click="IntentionToCancel">取消</el-button>
            <el-button type="primary" @click="IntentionConfirmed">确认</el-button>
        </span>
    </el-dialog>


</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import request from '@/api/request'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()

const IntentionDisplay = ref(false) // 部门显示
const selectedRowId = ref(null) // 保存当前选中行
const value1 = ref<string>('') // 默认值

const theDepartmentIAmIn = ref("选择部门")//所在部门

const SelectDropDown = ref([])

const thePersonInChargeCalls = () => {
    request.get('/department/findDeptAndPostById').then(res => {
        SelectDropDown.value = res.data
        console.log('SelectDropDown', SelectDropDown.value);

    })
}
thePersonInChargeCalls()

const IntentionData = ref([ // 部门数据

])


const requirementTypeDate = [ // 招聘需求类型
    {
        value: '新增',
        label: '新增'
    },
    {
        value: '替换',
        label: '替换'
    },
    {
        value: '储备',
        label: '储备'
    }
]

// 
const recruitmentManagerDate = ref([

])
const demander = () => {
    request.get("/department/find").then(res => {
        console.log('部门信息', res.data);
        recruitmentManagerDate.value = res.data
        IntentionData.value = res.data
        console.log('IntentionData', IntentionData.value);

        console.log('recruitmentManagerDate', recruitmentManagerDate.value);

    })
}
demander()

const departmentButton = () => { //部门信息
    IntentionDisplay.value = true
}

const departmentPosition = () => {


    request({
        url: "/department/listWithStructure",
        method: "get",
        params: { deptId: form.departmentid }
    }).then(res => {
        console.log('职位信息', res.data);
        positionDateDate.value = res.data


    }).catch(err => {
        console.log(err);

    })
}
const positionDateDate = ref([])//职位
const positionNatureDate = [ // 职位性质
    {
        value: '全职',
        label: '全职'
    },
    {
        value: '兼职',
        label: '兼职'
    },
    {
        value: '实习',
        label: '实习'
    }

]
const workLocationDate = [ // 工作地点
    {
        value: '上海',
        label: '上海'
    },
    {
        value: '北京',
        label: '北京'
    },
    {
        value: '广州',
        label: '广州'
    },
    {
        value: '深圳',
        label: '深圳'
    },
    {
        value: '杭州',
        label: '杭州'
    }
]

const personnelSourceDate = [ // 人员来源
    {
        value: '社招',
        label: '社招'
    },
    {
        value: '校招',
        label: '校招'
    },
    {
        value: '其他',
        label: '其他'
    }
]

const educationRequirementDate = [ // 学历要求
    {
        value: '本科',
        label: '本科'
    },
    {
        value: '大专',
        label: '大专'
    },
    {
        value: '高中',
        label: '高中'
    },
    {
        value: '其他',
        label: '其他'
    }
]
// 时间选择器
const TimeAttribute = ref('')
// 到岗时间
const ArrivalTime = ref('')
// 职位
const textarea = ref('')
// 简历信息
const ResumeInformation = ref([{
    id: 'CandidateID', label: '候选人编号', width: '160'
}, { id: 'Resumestatus', label: '简历状态', width: '100' }, { id: 'CandidateName', label: '候选人姓名', width: '160' },
{ id: 'age', label: '年龄', width: '100' },
{ id: 'Accounts', label: '户口', width: '160' },
{ id: 'Intended position', label: '意向职位', width: '160' },
{ id: 'Thetypeofrequirement', label: '需求类型', width: '160' },
{ id: 'Degree', label: '学历', width: '160' },
{ id: 'specialized', label: '专业', width: '160' },
{ id: 'school', label: '学校', width: '160' }
])
// 数据源
const ResumeData = ref([{
    CandidateID: '1', Resumestatus: '待处理', CandidateName: '德克萨斯', age: '25', Accounts: '汉', Intendedposition: '前端工程师', Thetypeofrequirement: '全职', Degree: '本科', specialized: '计算机科学与技术', school: '中国海洋大学'

}])

const fromRef = ref()
// 表单数据对象
const form = reactive({
    // 基础信息部分
    requirementid: null,           // 编号，招聘需求唯一标识符
    jobname: '',               // 岗位名称
    departmentid: null,          // 归属部门编号，父级部门ID
    demandsubmitter: '',       // 需求提交人
    recruiterid: null,           // 负责招聘的HR人员ID，关联员工表
    typeOfDemand: '',          // 需求类型
    numberofpositions: '',     // 招聘人数
    jobdescription: '',        // 岗位职责表述
    qualifications: '',        // 岗位要求
    budgetsalary: '',          // 薪资范围
    jobnature: '',             // 岗位性质（如正式、实习、兼职、劳务派遣）
    sourceofpersonnel: '社招',     // 人员来源（如校招、社招、内聘）
    status: '',                // 状态（开启、关闭）
    creationdate: '',          // 创建时间
    genderrequirement: '',     // 性别要求
    agerequirement: '22',        // 年龄要求
    travelrequirement: '',     // 出差要求
    educationlevel: '本科',        // 学历要求
    yearsofexperiencemin: '2',  // 工作年限
    worklocation: '',          // 地点
    workexperience: '',        // 工作经历
    remarks: '',                // 备注（额外字段）
    expecttobeonduty: '',    // 期望工作
    distributionmode: '' // 发放方式
})

// 表单验证规则
const rules = reactive({
    demandsubmitter: [{ required: true, message: '请选择需求提交人', trigger: 'change' }],
    typeOfDemand: [{ required: true, message: '请选择需求类型', trigger: 'change' }],
    recruiterid: [{ required: true, message: '请选择招聘负责人', trigger: 'change' }],
    departmentid: [{ required: true, message: '请选择所在部门', trigger: 'change' }],
    jobname: [{ required: true, message: '请选择岗位', trigger: 'change' }],
    jobnature: [{ required: true, message: '请选择岗位性质', trigger: 'change' }],
    numberofpositions: [{ required: true, message: '请输入需求人数', trigger: 'blur' }],
    worklocation: [{ required: true, message: '请选择工作地点', trigger: 'change' }],
    expecttobeonduty: [{ required: true, message: '请选择期望到岗时间', trigger: 'change' }],
    budgetsalary: [{ required: true, message: '请输入薪资区间', trigger: 'blur' }],
    sourceofpersonnel: [{ required: true, message: '请选择人员来源', trigger: 'change' }],
    educationlevel: [{ required: true, message: '请选择学历要求', trigger: 'change' }],
    yearsofexperiencemin: [{ required: true, message: '请输入工作年限要求', trigger: 'blur' }],
    agerequirement: [{ required: true, message: '请输入年龄要求', trigger: 'blur' }],
    jobdescription: [{ required: true, message: '请输入岗位职责', trigger: 'blur' }],
    qualifications: [{ required: true, message: '请输入任职要求', trigger: 'blur' }],
    creationdate: [{ required: true, message: '请选择提交时间', trigger: 'change' }]
})

const add = () => {
    fromRef.value.validate((valid) => {
        if (valid) {
            // 获取表单数据并打印到控制台
            console.log('表单数据:', form)
            request({
                url: '/recruitmentBasics/insert',
                method: 'post',
                data: form
            }).then(res => {
                console.log(res.data)

                ElMessage.success('添加成功') // 显示成功消息
                // 返回上一页或跳转到列表页
                router.go(-1)
            }).catch(err => {
                console.log(err)
                ElMessage.error('添加失败') // 显示失败消息
            })
        } else {
            ElMessage.error('请填写所有必填项')
            return false
        }
    })
}

const cancel = () => {
    router.go(-1)
}

// 部门确定
const IntentionConfirmed = () => {
    const selectedRow = IntentionData.value.find(row => row.deptId === selectedRowId.value)
    if (selectedRow) {
        console.log('选中的数据:', selectedRow)
        theDepartmentIAmIn.value = selectedRow.deptName
        // 将选中的部门ID赋值给表单的departmentid字段
        form.departmentid = selectedRow.deptId

        // 关闭对话框
        IntentionDisplay.value = false
        departmentPosition()
    } else {
        console.log('未选择任何数据')
    }
}
// 部门确定取消
const IntentionToCancel = () => {
    IntentionDisplay.value = false
}

const filterStructure = (value) => {
    let it = positionDateDate.value[0].departmentalStructure.filter(item => item.postsName == value)[0]
    console.log(it);
    let q = it.baseSalary
    let j = it.baseSalary + it.bonus + it.housingAllowance + it.mealSubsidy + it.otherSubsidies + it.paySalary + it.seniorityWages + it.transportationSubsidy
    form.budgetsalary = q + "~" + j
}
</script>

<style scoped>
/* 外层容器，可控制整体条的高度、圆角等 */
.progress-bar {
    height: 6px;
    background-color: #ccebf7;
    border-radius: 3px;
    display: flex;
    width: 100%;
    /* 确保进度条容器宽度占满父容器 */
    overflow: hidden;
    /* 防止子元素溢出 */
}

.progress {
    width: 8%;
    height: 10;
    background-color: #61c3ea;
    border-radius: 3px 0 0 3px;
    transition: width 0.3s ease;
    /* 添加宽度变化的过渡效果 */
}
</style>